<template>
  <div class="search-bar-content">
    <el-row>
      <el-form
        ref="ruleForm"
        :model="formParams"
        :inline="true"
        :label-position="labelPosition || 'right'"
        size="small"
      >
        <Items v-for="(item, i) in fillerList" :key="i" style="margin-bottom: 10px" :items="item" :label-position="labelPosition || 'right'" />

        <el-form-item class="layout-item">
          <el-button size="small" @click="resetSearch">重置</el-button>
          <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
          <slot name="inner" />
        </el-form-item>
        <slot />
      </el-form>

    </el-row>
  </div>
</template>
<script>
import Items from './../FormGroup/items.vue'
export default {
  name: 'FormGroup',
  components: {
    Items
  },
  props: ['searchConfig', 'labelWidth', 'labelPosition', 'isShowBtns', 'slotSpan'],
  data() {
    return {
      formParams: {},
      rules: {},
      fillerList: []
    }
  },
  watch: {
    fillerList: {
      deep: true,
      handler(val) {
        if (val) {
          this.fillerList.forEach(v => {
            this.formParams[v.keyIndex] = v.value
          })
          this.$emit('transferSearchParams', this.formParams)
        }
      }
    }
  },
  created() {
    this.fillerList = JSON.parse(JSON.stringify(this.searchConfig))
    this.fillerList.forEach(v => {
      this.formParams[v.keyIndex] = v.value
    })
  },
  mounted() {
    console.log(this.fillerList, this.searchConfig, '---===---')
  },
  methods: {
    resetFormParams() {
      this.fillerList = JSON.parse(JSON.stringify(this.searchConfig))
      this.fillerList.forEach((v, i) => {
        v.value = this.searchConfig[i].value
        this.formParams[v.keyIndex] = this.searchConfig[i].value || ''
      })
    },
    resetSearch() {
      this.resetFormParams()
      this.$emit('resetSearchParams', this.formParams)

      this.$emit('resetSearch')
    },
    handleSearch() {
      this.$emit('search', this.formParams)
    },
    handleAdd() {}
  }
}
</script>
<style lang="scss">
.search-bar-content {
    width: 100%;
    .el-form-item--small.el-form-item {
        margin-bottom: 0;
    }
    .el-form {
        // display: flex;
        // align-items: center;
    }
}

</style>
